18

Problem

Every day on SO, I come across questions sharing a stack snippet that has local images in it, which makes the images inaccessible and the problem irreproducible. While this is not always a problem, it often is, especially when the question is about the images...

If users would read the guidelines, they would know they need to share a minimal, reproducible example. If users would thoroughly review their question before posting it, the problem would also be solved. Unfortunately, they don't always do.

Possible solutions?

What if those local, inaccessible images were automatically replaced with dummy images? The downside to this approach is you'd probably still end up with images having the wrong dimensions, which is not always better than missing images.

But what if there was a way to show a warning when images in a code snippet are inaccessible? That would at least partially solve the problem of numerous questions being asked every day about an irreproducible problem.

Are there other/better ideas to help improve the quality of these questions?

11
  • 4
    "Every day on SO, I come across questions sharing a stack snippet that has local images in it" how can this happen so often? There is no direct way to link images by local path. If you use the button in the editor, you can choose an image and it would be automatically uploaded. If you drag and drop the image it does the same and uploads it. And I don't think that many users are well enough versed in Markdown to type the code for the image by hand and then just paste the local path.
    – VLAZ
    Jun 22, 2022 at 8:15
  • 2
    @VLAZ "[...] a stack snippet that has local images in it" Not talking about images directly added to posts, here. Jun 22, 2022 at 8:18
  • 14
    OK, sorry - my bad. In that case, the solution seems quite simple - either ignore the image if it's irrelevant to the question, or if it is relevant - then flag for needing a MCVE. If the dimensions are the only thing needed, then OP can set them as height and width. Or there are services for placeholder images of given sizes. Again, though, the image might not even be important. If the question is "how do I make text bold" then OP has failed on the minimal part.
    – VLAZ
    Jun 22, 2022 at 8:29
  • 6
    When editing questions with snippets where images are unavailable (it's a problem common to many CSS questions and is not limited to local files), I usually replace them with stock ones that have a compatible license. 99% of the time, the image itself is irrelevant to the question at hand (unless the post is specifically about images failing to load and such). Don't think it's that much of a problem to require a system solution - at first glance, it would require substantial dev effort too, which makes your proposal most likely inactionable - SE hasn't done anything to snippets for years. Jun 22, 2022 at 9:27
  • I completely agree on the fact that, most of the time, the image's content is irrelevant. That's why I also suggested to replace them with dummy images, or free licensed stock images. As you suggested, the problem I described is typically an issue in HTML/CSS questions. It's true that these questions only make up for a small part of the thousands of questions asked on SO every day. Maybe there are easier solutions... Jun 22, 2022 at 10:47
  • 4
    Yeah, I mean, I do not disagree that Stack Snippets can use a lot of improvements, just not sure if there is anything that can be done system-wise. Technically, it could be feasible to check src attributes (not only for images) and display warnings - however, asking that of SE is mostly pointless as they don't even keep Stack Snippets up to date, much less develop new features for them (nothing to the detriment of the proposal - just the sad state of things as they are currently). Jun 22, 2022 at 10:59
  • 5
    Flag these as lacking an MCVE when the images need to be visible to constitute one. You can leave a comment to that effect as well. The magic link [mcve], when included in a comment, will expand to a link to the help center page on that topic as well.
    – TylerH
    Jun 22, 2022 at 15:12
  • @VLAZ & TylerH That's what I do on a daily basis, but I was looking for a more efficient way to solve this. It's always a good idea to point users to the MCVE page, but what if we didn't need to? ;) Jun 22, 2022 at 15:23
  • 1
    I asked for something related to this where SO would provide a limited set of resources that could be linked to and used within a question like images, videos, or some other static resource, but I didn't get much tracion: Are there any built-in resources that you can link to from within question to use in a code snippet on the Stack Overflow domain?
    – zero298
    Jun 22, 2022 at 15:26
  • That's actually a great idea! Jun 22, 2022 at 15:28
  • 11
    Not all problems needs new features. Downvote and closevote, and hope their next question is better.
    – klutt
    Jun 22, 2022 at 15:38

3 Answers 3

23

Placeholder images

IMHO, placeholder images, seems to be the best solution to ensure the post is reproducible, and will be as long as the placeholder service exists

The downside to this approach is you'd probably still end up with images having the wrong dimensions, which is not always better than missing images.

There are many placeholder images, like cats, bears, bacon, beards, Nicolas Cage, and many more

Most of those services offer an extra parameter to change the dimensions of the image:

  • https://via.placeholder.com/200x200
  • https://placekitten.com/200/200

Some even allow to change the color and/or text so you can distinguish multiple images

  • https://via.placeholder.com/200x200?text=button%201
  • https://via.placeholder.com/200x200?text=back-button
  • https://via.placeholder.com/200x200/FF5555?text=red

Using custom color and text makes for the perfect replacement for any image.


Some visual examples from above, all with 200x200 pixels:

https://placekitten.com/200/200 https://www.placecage.com/200/200

enter image description here enter image description here

https://via.placeholder.com/200x200?text=back-button https://via.placeholder.com/200x200/FF5555?text=red

example-0 example-1


Note: I'm not associated with any of the above mentioned services

5
  • 14
    "I'm not associated with" - dang it, and we have been preparing to get you nuked for Nicolas Cage spam! :) Jun 22, 2022 at 12:21
  • 1
    I like the idea too... I know that you can give placeholder images dimensions in the URL, but what I meant with "you'd probably still end up with images having the wrong dimensions", is that if the dimensions are not specified in the code, the script that's replacing them with a placeholder image would have no way to guess the 'correct' dimensions (which would be the dimensions of the inaccessible image). Jun 22, 2022 at 12:33
  • 4
    "cats, bears, bacon, beards, Nicolas Cage". Where can I see this wonderful musical?
    – Andy
    Jun 22, 2022 at 18:45
  • "Person", "woman", "man", "camera", "TV"
    – Flydog57
    Jun 22, 2022 at 19:40
  • 5
    Why are people upvoting something that does nothing to solve the problem? Because memes? Is this really what Stack Overflow has come to?
    – Ian Kemp
    Jun 23, 2022 at 11:09
10

The ideal solution would be for Stack Snippets to warn people that they're doing things like this. Since the likelihood of Stack Snippets getting any developer time from Stack Exchange Inc. in the next millennium is as close to zero as something can possibly be without actually being zero, that option is out.

Editing the question to replace the missing image with placeholder images is a complete waste of time because you are just replacing missing content (local images) with irrelevant content (the placeholders). In fact I'd consider such an edit actively harmful because it doesn't make the question any more answerable than when it had the missing images. Please don't do this.

The only sane options are:

  • If the missing images don't detract from the topic of the question, edit the question to remove them.
  • If the missing images are vital to understanding and thus answering the question, downvote and vote to close it as "Needs debugging details".

Both of the above options exist today, so there is no problem here (apart from SE Inc.'s continuing wilful neglect of the community that pays their salaries).

3
  • I agree that valid edits are rare, but I think they do exist, mainly in CSS questions. (Generic example: "How do I display a semi-transparent overlay on this image?" where the asker has made a mistake in their overlay. The image isn't directly related to the problem and basically any image will do, but without it the snippet doesn't visually show the issue) I'd argue that improving the clarity of the question is a valuable edit on its own, regardless of wether it makes the question more answerable.
    – DBS
    Jun 24, 2022 at 9:09
  • Why are people upvoting something that don't acknoledge what StackSnippets are? Because it talks bad on SO devs for free and calls to do nothing to salvage what can be? Is this really what Stack Overflow has come to? If it was technically possible to determine that somewhere in the HTML, CSS, or JS code of a snippet there was a link to an image that's broken, and that based on the question context OP's action is required, such mechanism could probably answer a good 50% of questions with snippets.
    – Kaiido
    Jun 24, 2022 at 23:45
  • .For the second point, so called "experts" can determine in 99% of cases if a placeholder is fine or not. From experience and based on no number, I'd say about 5% of such broken images in a snippet could have been removed, maybe 30% were still ok even if broken (e.g because DOM selectors don't care ghe state of an <img>), and the rest were improved when edited to use a placeholder
    – Kaiido
    Jun 24, 2022 at 23:46
7

Warn about inaccessible images

First non-reproducable code needs to be identified as such. The question whether a placeholder image is the remedy comes later, and it comes with a lot of assumptions which only the author can decide on. So before he/she gets pushed into something that needs to be thought through - does this really exemplify my question? what size should the placeholder be, and what should it look like? - he/she needs to be made aware of the fact the code still needs some work.

Warn about an inaccessible path, and then maybe link to an explanation how to add placeholder images.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .